<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<script id="partition-header-template" type="text/x-kendo-template">
    <div class="dropdown-header k-widget k-header">
        <table>
            <thead>
            <tr>
                <td width="90px">分区名</td>
                <td width="90px">分区描述</td>
            </tr>
            </thead>
        </table>
    </div>
</script>
<script id="partition-template" type="text/x-kendo-template">
    <table>
        <tr>
            <td style="text-align: center;width:90px">#: data.ename#</td>
            <td style="text-align: center;">#: data.cname#</td>
        </tr>
    </table>
</script>
<div style="margin-bottom: 20px;">
    <span style="font-size: 30px">服务执行分析</span>
</div>
<div class="textboxes">

    <div class="form-inline group-margin">
        <div class="form-group">
            <label>分区名称:</label>
            <input kendo-combo-box
                   k-data-text-field="'ename'"
                   k-data-value-field="'ename'"
                   k-data-source="partitionData"
                   k-header-template="partitionHeaderTmp"
                   k-template="partitionTmp"
                   ng-trim="true"
                   k-auto-width="true"
                   k-rebind="partitionData"
                   ng-model="partition"
                   style="width:210px;"/>

        </div>
        <div class="form-group">
            <label>服务名称:</label>
            <input kendo-auto-complete ng-trim="true" ng-model="svcName" style="width:210px;">
        </div>
        <div class="form-group">
            <label>查询内容:</label>
            <select kendo-drop-down-list ng-model="queryType" style="width:210px;">
                <option value="0">Service执行偏差</option>
                <option value="1">Service执行时长</option>
            </select>
        </div>
        <div class="form-group">
            <label>起始时间:</label>
            <input kendo-date-time-picker k-format="'yyyy-MM-dd HH:mm:ss'" k-ng-model="beginDateTime"/>
        </div>
        <div class="form-group">
            <label>结束时间:</label>
            <input kendo-date-time-picker k-format="'yyyy-MM-dd HH:mm:ss'" k-ng-model="endDateTime"/>
        </div>
        <div class="form-group">
            <kendo-button class="k-primary" ng-click="query()">查询</kendo-button>
        </div>
    </div>
</div>

<div style="width:100%;" ng-if="queryTypeForCharts == '0'">
    <div style="height:450px" echarts="option0"></div>
</div>
<div style="width:100%;" ng-if="queryTypeForCharts == '1'">
    <div style="height:450px" echarts="option1"></div>
</div>
<!--k-on-data-bound="onDataBound(kendoEvent)"-->
<div class="table-responsive">
    <div kendo-grid="serverExecuteGrid"
         k-options="gridOptions"
         k-rebind="gridOptions"
         k-column-menu="true"
         k-sortable="true"
         k-resizable="true"
         k-navigatable="true"
         k-filterable="true">
        <div k-detail-template>
            <div>
                <div kendo-grid="svcExecuteGrid"
                     k-options="detailOptions(dataItem)"></div>
            </div>
        </div>
    </div>
</div>
